<script>
// 弹出框的提示信息
import { ElMessage, ElMessageBox } from 'element-plus'

import { Search, CaretBottom } from '@element-plus/icons-vue';

import { getRentingList, add, del } from "@/api/renting"


export default {
    data() {
        return {
            tableData: [],
            page: 0,
            // Select1: '1',
            currentPage: 1,
            drawer: false,
            drawer1: false,


            input3: '',
            select1: '',
            select2: '',
            select3: '',
            input2: '',

            // 用户的数据
            formData: {
                contactName: "",     //姓名
                sex: "",      //性别
                tel: "",      //电话    "number|123.1-10": 1 
                rentalNum: '', //租房编号
                houseNum: '',     //房屋编号
                houseAdress: '',     // 房屋地址
                houseType: "",
                houseState: "",    //房屋状况（已租/未租） 
                checkintime: '',   //入住时间
                rentalstime: "", // 长租短租
                headofrent: '', //租房负责人 
            }
        }
    },
    //  注册局部组件 这里是点击收回按钮
    components: {
        Search,
        CaretBottom,
    },
    mounted() {
        // 获取管理员列表  
        //  mock 中renting 传的有参数 这里要加 {page:this.page}  上面data中加  page:0, 
        //  getRentingList({page:this.page}).then(res => {
        getRentingList().then(res => {
            // console.log(res, "这里是res的数据111");
            this.tableData = res
        });
        
        
    },
    methods: {
        View(row) {
            this.drawer = true
            console.log(row)
            this.formData = row
            console.log(111)

        },
        View1() {
            this.drawer1 = true
            console.log(222)

        },
        // 删除数据
        deleteClick(row) {
            ElMessageBox.confirm(
                '你确定要删除吗?',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                del(row).then(res => {
                    // console.log({ contactName: row.contactName })

                    // 重新获取数据
                    getRentingList().then(res => {
                        this.tableData = res
                    })
                })
            })

        },

        // 添加数据
        addData() {
                console.log("zk")
                this.formData.houseState=="已租" ? this.formData.houseState="🟢 已租" : this.formData.houseState="🔴 未租"

            // console.log('1ddddd111111111111111111111');
            // console.log(this.formData)
            add(this.formData).then((res) => {
                // console.log('aaaaaaaaaaaaaa',res)
                // 重新获取数据
                getRentingList().then(res => {
                    // console.log(res);
                    this.tableData = res

                })
            })
           console.log(this.formData.houseState)
           
            
        },
        // 查看抽屉效果关闭后 
        close() {
            // 清除所有数据
            this.formData = {}
        },
        // 添加抽屉效果关闭后 
        close1() {
            // console.log(4444444444)
            // 清除所有数据
            this.formData = {}
        },
        // 筛选  搜索框
        search() {
            // console.log("搜索")
            // console.log(this.input3)
            getRentingList().then(res => {
                // console.log(this.input3)
                // console.log(res);
                // console.log(res[0]);
                // console.log(res[0].rentalNum);
                // this.tableData = res
                let arr = []
                for (let i = 0; i < res.length; i++) {
                    // console.log(this.input3)
                    // console.log(res[i].houseNum)
                    if (res[i].houseNum == this.input3) {
                        // console.log(res);
                        // console.log(res[i], "for循环内的res[i]");
                        arr.push(res[i])  //把根据输入框选出的这一项push进新数据中 
                        // console.log(arr)
                        this.tableData = arr    // 重新渲染页面数据把  本来是res中的数据渲染给this.tableData  先在是arr中的数据
                        // return    //  不加会有问题
                    }
                }
            })




        },


                 // 筛选  下拉框

        multiFilter(array, filters) {
            const filterKeys = Object.keys(filters)
            return array.filter((item) => {
                return filterKeys.every(key => {
                    if (!filters[key].length) return true
                    return !!~item[key].indexOf(filters[key])
                })
            })
        },

        select() {
            let obj = {
                precinct: this.select1 || '',  //筛选片区名称
                houseType: this.select2 || '', // 房屋类型
                houseState: this.select3 || '', //房屋状况（已租/未租） 
            }
            getRentingList().then(res => {
                console.log(res, "这里是res的数据111");
                this.tableData = this.multiFilter(res, obj)
            })
        },

       



        



    },
    computed: {

        // +++++++++++++++ 计算出当前页该显示什么数据 
        computedTableData() {
            return this.tableData.slice((this.currentPage - 1) * 16, (this.currentPage - 1) * 16 + 16)
        }
    }
}
</script>
<template>
    <div class="box1">
        合租管理 片区管理



        <el-select v-model="select1" placeholder="上城区" style="width: 115px" suffix-icon="CaretBottom">
            <el-option label="上城区" value="上城区" />
            <el-option label="西湖区" value="西湖区" />
            <el-option label="拱墅区" value="拱墅区" />
            <el-option label="钱塘区" value="钱塘区" />
            <el-option label="滨江区" value="滨江区" />
            <el-option label="萧山区" value="萧山区" />
        </el-select>
        房屋类型
        <el-select v-model="select2" placeholder="一室" style="width: 115px" suffix-icon="CaretBottom">
            <el-option label="一室" value="一室" />
            <el-option label="两室" value="两室" />
        </el-select>
        房屋状况
        <el-select v-model="select3" placeholder="🟢 已租" style="width: 115px" suffix-icon="CaretBottom">
            <el-option label="🟢 已租" value="🟢 已租" />
            <el-option label="🔴 未租" value="🔴 未租" />
        </el-select>
        <el-button type="primary" @click="select">筛选</el-button>





        <el-input v-model="input3" placeholder="请输入要查询的房屋编号" class="input-with-select">
            <template #append>
                <el-button icon="Search" @click="search" />
            </template>
        </el-input>


        <!-- 点击添加用户 -->
        <el-button size="small" type="danger" @click="View1">添加</el-button>

        <div class="box">
            <el-table :data="computedTableData" stripe style="width: 100%" height="550px">

                <el-table-column prop="contactName" label="房屋联系人" width="180">

                </el-table-column>

                <el-table-column prop="sex" label="性别" width="190">

                </el-table-column>

                <el-table-column prop="tel" label="电话">

                </el-table-column>

                <el-table-column prop="rentalNum" label="房屋编号">

                </el-table-column>

                <el-table-column prop="houseAdress" label="房屋地址">

                </el-table-column>

                <el-table-column prop="houseType" label="房屋类型" />

                <el-table-column prop="houseState" label="房屋状况" />

                <el-table-column prop="houseoperate" label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="View(scope.row)">查看</el-button>
                        <el-button size="small" type="danger" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!-- 用做分页显示 +++++++++++++++++++++++++++++++++ -->
        <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next"
            :total="tableData.length" :page-count="Math.ceil(tableData.length / 16)" />



        <!-- 查看的 抽屉效果 -->
        <el-drawer @close="close" v-model="drawer">

            <template #header>
                <h4> 合租信息资料</h4>
            </template>

            <el-form label-width="120px">
                <el-form-item label="姓名"> :{{ formData.contactName }}
                </el-form-item>
                <el-form-item label="性别"> :{{ formData.sex }}
                </el-form-item>
                <el-form-item label="电话"> :{{ formData.tel }}
                </el-form-item>
                <el-form-item label="房屋编号"> :{{ formData.rentalNum }}
                </el-form-item>
                <el-form-item label="房屋地址"> :{{ formData.houseAdress }}
                </el-form-item>
                <el-form-item label="入住时间"> :{{ formData.checkintime }}
                </el-form-item>
                <el-form-item label="长租/短租"> :{{ formData.rentalstime }}
                </el-form-item>
                <el-form-item label="租房负责人"> :{{ formData.headofrent }}
                </el-form-item>

                <el-button type="primary" round @click="drawer = false">返回</el-button>
            </el-form>


        </el-drawer>

        <!-- 添加的 抽屉效果 -->
        <el-drawer @close="close1" v-model="drawer1">

            <template #header>
                <h4> 新增合租信息</h4>
            </template>

            <el-form label-width="120px">
                <el-form-item label="姓名"> :
                    <el-input v-model="formData.contactName" />
                </el-form-item>
                <el-form-item label="性别"> :
                    <el-select placeholder="男" v-model="formData.sex">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="电话"> :
                    <el-input v-model="formData.tel" />
                </el-form-item>
                <el-form-item label="房屋编号"> :
                    <el-input v-model="formData.rentalNum" />
                </el-form-item>
                <el-form-item label="房屋地址"> :
                    <el-input v-model="formData.houseAdress" />
                </el-form-item>
                <el-form-item label="房屋类型"> :
                    <el-select placeholder="一室" v-model="formData.houseType">
                        <el-option label="一室" value="一室" />
                        <el-option label="两室" value="两室" />
                    </el-select>
                </el-form-item>
                <el-form-item label="房屋状况"> :
                    <el-input v-model="formData.houseState" />
                </el-form-item>

                <el-form-item label="入住时间"> :
                    <el-input v-model="formData.checkintime" />
                </el-form-item>

                <el-form-item label="长租短租"> :
                    <el-input v-model="formData.rentalstime" />
                </el-form-item>

                <el-form-item label="租房负责人"> :
                    <el-input v-model="formData.headofrent" />
                </el-form-item>

                <el-form-item label="片区管理"> :
                    <el-input v-model="formData.precinct" />
                </el-form-item>


                <el-button type="primary" round @click="drawer1 = false">取消</el-button>
                <el-button type="primary" round @click="addData">保存</el-button>
            </el-form>


        </el-drawer>



    </div>
</template>

<style lang="scss" scoped>
html,
body,
#app,
.common-layout,
.el-container,
.box1 {
    height: 100%;
    position: relative;
}

.box {
    width: 95%;
    height: 70%;
    background-color: white;
}

.el-pagination {
    position: absolute;
    bottom: 0;
    right: 0;
}

.input-with-select {
    width: 360px;
}
.el-select-dropdown__item:hover{
  background-color: rgba(76, 164, 254);
  color: white;
}



</style>
